<script lang="ts">
export default {
  name: "xt-search-bar",
};
</script>

<script setup lang="ts">
import { computed, ref } from "vue";
import xtForm from "../../../components/xt-form/src/main.vue";
import xtFormItem from "../../../components/xt-form-item/src/main.vue";
import xtRow from "../../../components/xt-row/src/main.vue";
import xtCol from "../../../components/xt-col/src/main.vue";
import xtInput from "../../../components/xt-input/src/main.vue";
import xtSelect from "../../../components/xt-select/src/main.vue";
import xtCascader from "../../../components/xt-cascader/src/main.vue";
import xtDatePicker from "../../xt-date-picker/src/main.vue";
import xtLink from "../../../components/xt-link/src/main.vue";
import Typings from "../../../typings";

interface Props {
  collapse?: boolean;
  labelWidth?: number | string;
  data: Typings.Common.plainObj;
  formJson: Typings.SearchBar.formJson[];
}

const props = withDefaults(defineProps<Props>(), {
  labelWidth: 96,
  collapse: true,
  data: () => ({}),
  formJson: () => [],
});

const emit = defineEmits(["search", "reset"]);

const form = ref();
const isCollapse = ref<boolean>(props.collapse);
const collapseBtnName = computed<string>(() => {
  return isCollapse.value ? "展开" : "收缩";
});

// 过滤 formJson
const filterFormJson = computed<Typings.SearchBar.formJson[]>(() => {
  return props.formJson.filter((json) => {
    return !(typeof json.isHide === "function" ? json.isHide() : json.isHide);
  });
});

// 收缩/展开的 formJson
const collapseFormJson = computed(() => {
  return filterFormJson.value.filter((_json, index) => {
    if (isCollapse.value) {
      return index < 2;
    } else {
      return true;
    }
  });
});

// 操作按钮 col 的宽度
const btnSpan = computed(() => {
  const len = collapseFormJson.value.length;
  const fixedLen = 3 - (len % 3);
  return fixedLen * 8;
});

const controller = {
  reset() {
    form.value.getInstance().resetFields();
    emit("reset", props.data);
  },
  search() {
    emit("search", props.data);
  },
};
</script>

<template>
  <xt-form
    ref="form"
    class="xt-search-bar"
    :labelWidth="labelWidth"
    :model="data"
  >
    <xt-row :gutter="24">
      <xt-col
        v-for="{
          el,
          span,
          label,
          prop,
          options,
          on = {},
          ...col
        } in collapseFormJson"
        :span="span || 8"
        :key="prop"
      >
        <xt-form-item :label="label" :prop="prop">
          <template v-if="['input'].includes(el)">
            <xt-input
              v-model="data[prop]"
              v-bind="{ ...col }"
              v-on="on"
            ></xt-input>
          </template>

          <template v-if="['select'].includes(el)">
            <xt-select
              v-model="data[prop]"
              :options="options || []"
              v-bind="{ ...col }"
              v-on="on"
            ></xt-select>
          </template>

          <template v-if="['cascader'].includes(el)">
            <xt-cascader
              v-model="data[prop]"
              :options="options || []"
              v-bind="{ ...col }"
              v-on="on"
            />
          </template>

          <template v-if="['date-picker'].includes(el)">
            <xt-date-picker
              v-model="data[prop]"
              v-bind="{ ...col }"
              v-on="on"
            />
          </template>

          <template v-if="['slot'].includes(el)">
            <slot :name="prop"></slot>
          </template>
        </xt-form-item>
      </xt-col>
      <xt-col :span="btnSpan">
        <div class="btn-container">
          <xt-link @click="controller.search">查询</xt-link>
          <xt-link @click="controller.reset" type="info">重置</xt-link>
          <xt-link
            class="btn"
            type="info"
            @click="isCollapse = !isCollapse"
            v-if="filterFormJson.length > 2"
            >{{ collapseBtnName }}</xt-link
          >
          <slot name="btn" v-bind="{ data }"></slot>
        </div>
      </xt-col>
    </xt-row>
  </xt-form>
</template>

<style lang="scss">
@use "../../../scss/xt-search-bar.scss";
</style>
